<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>

  <body>
  <div>

    <div ng-include="headerInclude"></div>
    <div ng-controller="Apiman.ImportApisController" id="form-page" class="container-pf-nav-pf-vertical container-fluid apiman-import-apis-wizard apiman-wizard page" ng-cloak="" ng-show="pageState == 'loaded'">
      <div class="row">
        <div class="col-md-12">
          <ol class="breadcrumb" data-field="breadcrumb">
            <li><a id="bc-home" href="{{ pluginName }}/"><i class="fa fa-home fa-fw"></i><span apiman-i18n-key="home">Home</span></a></li>
            <li><a id="bc-apis" href="{{ pluginName }}/orgs/{{ org.id }}/apis"><i class="fa fa-shield fa-fw"></i><span>{{ org.name }}</span></a></li>
            <li class="active"><span apiman-i18n-key="import-apis_">Import from API Catalog</span></li>
          </ol>
        </div>
      </div>
      <div class="row">
        <!-- Wizard Items (left hand side) -->
        <div class="col-md-3 apiman-wizard-items">
          <div class="container-fluid">
            <div class="row">
              <div class="col-md-12 apiman-header ng-binding" apiman-i18n-key="import-apis_">Import from API Catalog</div>
            </div>
            <div class="row">
              <hr>
            </div>

            <div class="row">
              <div class="apiman-wizard-item" ng-class="{done: currentPageIdx > 0, active: currentPageIdx == 0}">
                <div class="step">
                  <i class="fa fa-fw" ng-class="{'fa-check-circle-o': currentPageIdx > 0, 'fa-circle-o': currentPageIdx == 0}"></i>
                  <span apiman-i18n-key="step-1" class="apiman-label-faded">Step 1</span>
                </div>
                <div class="step-title">
                  <span apiman-i18n-key="select-apis">Select APIs</span>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="apiman-wizard-item" ng-class="{done: currentPageIdx > 1, active: currentPageIdx == 1}">
                <div class="step">
                  <i class="fa fa-fw" ng-class="{'fa-check-circle-o': currentPageIdx > 1, 'fa-circle-o': currentPageIdx <= 1}"></i>
                  <span apiman-i18n-key="step-2" class="apiman-label-faded">Step 2</span>
                </div>
                <div class="step-title">
                  <span apiman-i18n-key="choose-plans">Choose Plans</span>
                </div>
              </div>
            </div>
            <div class="row">
              <div class="apiman-wizard-item" ng-class="{done: currentPageIdx > 2, active: currentPageIdx == 2}">
                <div class="step">
                  <i class="fa fa-fw" ng-class="{'fa-check-circle-o': currentPageIdx > 3, 'fa-circle-o': currentPageIdx <= 2}"></i>
                  <span apiman-i18n-key="step-3" class="apiman-label-faded">Step 3</span>
                </div>
                <div class="step-title">
                  <span apiman-i18n-key="import-apis">Import APIs</span>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="col-md-9 apiman-wizard-pages">
          <!-- Find APIs Page -->
          <div class="apiman-wizard-page" ng-show="currentPage == 'find-apis'">
            <div class="col-md-12">
              <h1 apiman-i18n-key="select-apis">Select APIs</h1>
              <p apiman-i18n-key="import-apis.overview.find-apis">
                The first step in the wizard is to search for and find the APIs you wish to
                import. The location of this data is dependent on how Apiman is configured, but
                in most cases you will be searching against some sort of registry of real, deployed
                APIs.
              </p>
              <hr>
              <div ng-show="importFrom == 'api-catalog'">
                <div class="apiman-wizard-search-box">
                  <form ng-submit="searchApiCatalog(searchText)">
                    <input ng-disabled="searchDisabled" apiman-i18n-key="search-api-name" ng-model="searchText" type="text" class="apiman-form-control form-control input-search" placeholder="Search by API name...">
                    <button type="submit" apiman-action-btn="" class="btn btn-default btn-search" data-field="searchButton" apiman-i18n-key="search" data-icon="fa-cog" placeholder="Searching">Search</button>
                  </form>
                </div>
                <div class="apiman-wizard-search-results">
                  <div class="alert alert-info" ng-show="apis.length == 0">
                    <span class="pficon pficon-info"></span>
                    <span apiman-i18n-key="import-apis.no-matching-apis-found">No matching APIs found - use the search box above to search for APIs by name.</span>
                  </div>
                  <div class="apiman-wizard-table-wrapper" ng-show="apis.length > 0">
                    <scrollable-table style="height: 150px">
                        <table class="table table-striped table-bordered">
                          <thead>
                            <tr>
                              <th apiman-i18n-key="api" class="import-apis-api">API</th>
                              <th apiman-i18n-key="id" class="import-apis-id">ID</th>
                              <th apiman-i18n-key="type" class="import-apis-type">Type</th>
                              <th apiman-i18n-key="category" class="import-apis-category">Category</th>
                              <th apiman-i18n-key="api-endpoint-label" class="import-apis-api-endpoint-label">Endpoint API</th>
                              <th apiman-i18n-key="actions" class="import-apis-actions">Actions</th>
                            </tr>
                          </thead>
                          <tbody>
                            <tr ng-repeat="api in apis | orderBy:'name'">
                              <td>{{ api.name }}</td>
                              <td>{{ api.description }}</td>
                              <td>{{ api.endpointType | uppercase }}</td>
                              <td>{{ api.tags[0] }}</td>
                              <td>{{ api.endpoint }}</td>
                              <td>
                                  <a ng-hide="isApiSelected(api) || isAlreadyExisting(api)" ng-click="addApi(api)" apiman-i18n-key="add">Add</a>
                                  <i ng-show="isAlreadyExisting(api)" class=" fa fa-fw fa-warning" apiman-i18n-key="import-apis.already-existing" title="An API with the same name already exists in this organization!"></i>
                              </td>
                            </tr>
                          </tbody>
                        </table>
                    </scrollable-table>
                  </div>
                </div>
              </div>
              <h1 apiman-i18n-key="selected-apis" style="margin-top: 40px">Selected APIs</h1>
              <div ng-show="importInfo.apis.length == 0">
                <div class="alert alert-info">
                  <span class="pficon pficon-info"></span>
                  <span apiman-i18n-key="import-apis.no-apis-selected">No APIs have been selected, please search for APIs above and then select at least one for import.</span>
                </div>
              </div>
              <div ng-show="importInfo.apis.length > 0">
                <div class="apiman-wizard-table-wrapper">
                  <scrollable-table style="height: 150px">
                      <table class="table table-striped table-bordered">
                        <thead>
                          <tr>
                            <th apiman-i18n-key="api" class="import-apis-api">API</th>
                            <th apiman-i18n-key="id" class="import-apis-id">ID</th>
                            <th apiman-i18n-key="type" class="import-apis-type">Type</th>
                            <th apiman-i18n-key="category" class="import-apis-category">Category</th>
                            <th apiman-i18n-key="api-endpoint-label" class="import-apis-api-endpoint-label">Endpoint API</th>
                            <th apiman-i18n-key="actions" class="import-apis-actions">Actions</th>
                          </tr>
                        </thead>
                        <tbody>
                          <tr ng-repeat="api in importInfo.apis | orderBy:'name'">
                            <td>{{ api.name }}</td>
                            <td>{{ api.description }}</td>
                            <td>{{ api.endpointType | uppercase }}</td>
                            <td>{{ api.tags[0] }}</td>
                            <td>{{ api.endpoint }}</td>
                            <td><a ng-click="removeApi(api)" apiman-i18n-key="remove">Remove</a></td>
                          </tr>
                        </tbody>
                      </table>
                  </scrollable-table>
                </div>
              </div>
            </div>
          </div>

          <!-- Choose Plans Page -->
          <div class="apiman-wizard-page" ng-show="currentPage == 'choose-plans'">
            <div class="col-md-12">
              <h1 apiman-i18n-key="choose-plans">Choose Plans</h1>
              <p apiman-i18n-key="import-apis.overview.choose-plans">
                Once you have located the API(s) you wish to import, choose whether these APIs should be public or
                should be offered through one or more of the plans defined by the organization.
              </p>
              <hr>
              <h3 apiman-i18n-key="import-apis.public-apis">Public API(s)</h3>
              <div>
                <span class="apiman-label-faded" apiman-i18n-key="import-apis.public-api-help">Select this option if you wish the imported APIs to be accessible directly, without using API contracts. Typically this option is used instead of selecting plans.</span>
              </div>
              <div style="padding: 8px; margin-bottom: 10px">
                <input ng-model="importInfo.isPublic" type="checkbox" id="public-apis">
                <label for="public-apis" apiman-i18n-key="import-apis.make-apis-public" style="padding-left: 3px">Make imported API(s) public</label>
              </div>
              <h3 apiman-i18n-key="available-plans">Available Plans</h3>
              <div>
                <span apiman-i18n-key="available-plans-help">Choose which plans should be presented when Client Apps create a contract to this API. Only plans in a locked state show up in this list.</span>
              </div>
              <div class="apiman-divider-40" ng-show="plans.length == 0">
                <div class="alert alert-warning">
                  <span class="pficon pficon-info"></span>
                  <span apiman-i18n-key="import-apis.no-locked-plans-found">No locked plans were found in the organization. Please create and lock at least one plan before attempting to configure them here. Or make your APIs Public using the checkbox above.</span>
                </div>
              </div>
              <!-- The plans to choose from -->
              <div class="apiman-plan-selector apiman-divider-40">
                <div class="container-fluid apiman-summaryrow" ng-repeat="plan in plans">
                  <div class="row">
                    <input ng-model="plan.checked" data-field="checkbox" type="checkbox">
                    <span class="title">{{ plan.name }}</span>
                    <select apiman-select-picker="" ng-model="plan.selectedVersion" ng-options="version for version in plan.lockedVersions" class="selectpicker pull-right">
                    </select>
                  </div>
                  <hr>
                </div>
              </div>
            </div>
          </div>

          <!-- Import APIs Page -->
          <div class="apiman-wizard-page" ng-show="currentPage == 'import-apis'">
            <div class="col-md-12">
              <h1 apiman-i18n-key="confirm-import">Confirm Import</h1>
              <p apiman-i18n-key="import-apis.overview.import-apis">
                Finally confirm that you want to import the selected APIs. Once you click <strong>Import</strong>,
                each of the APIs you have chosen will be added to the organization. Success or failure
                of each API import will be shown as it happens.
              </p>
              <hr>
              <div>
                <p apiman-i18n-key="confirm-import.explanation">Please verify that the APIs listed below really are the
                  ones you would like to import. Once you are satisfied, click <strong>Import</strong>!</p>
              </div>
              <h2 apiman-i18n-key="apis-to-import">APIs To Import</h2>
              <div class="apiman-wizard-table-wrapper apiman-import-wizard-apis">
                <scrollable-table style="height: 200px">
                    <table class="table table-striped table-bordered">
                      <thead>
                        <tr>
                          <th class="import-apis-circle"></th>
                          <th apiman-i18n-key="api" class="import-apis-api">API</th>
                          <th apiman-i18n-key="id" class="import-apis-id">ID</th>
                          <th apiman-i18n-key="type" class="import-apis-type">Type</th>
                          <th apiman-i18n-key="category" class="import-apis-category">Category</th>
                          <th apiman-i18n-key="api-endpoint-label" class="import-apis-api-endpoint-label">Endpoint API</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr ng-repeat="api in importInfo.apis | orderBy:'name'" ng-class="{'complete': api.status == 'imported', 'pending': !api.status, 'active': api.status == 'importing', 'error': api.status == 'error'}">
                          <td  id="import-apis-circle-td"><i class="fa fa-fw" ng-class="{'fa-check-circle-o': api.status == 'imported', 'fa-dot-circle-o': api.status == 'importing', 'fa-warning': api.status == 'error'}"></i></td>
                          <td>{{ api.name }}</td>
                          <td>{{ api.description }}</td>
                          <td>{{ api.endpointType | uppercase }}</td>
                          <td>{{ api.tags[0] }}</td>
                          <td>{{ api.endpoint }}</td>
                        </tr>
                      </tbody>
                    </table>
                    </scrollable-table>
              </div>
            </div>
          </div>

          <!-- The Wizard Buttons -->
          <div class="pull-right apiman-wizard-buttons">
            <hr />
            <button ng-disabled="disableBackButton || currentPage == 'find-apis'" id="back" class="btn btn-default" ng-click="prevPage()"><span class="i fa fa-angle-left"></span><span apiman-i18n-key="back">Back</span></button>
            <button ng-disabled="currentPage == 'import-apis' || !currentPageValid" id="next" class="btn btn-default" ng-click="nextPage()"><span apiman-i18n-key="next">Next</span><span class="i fa fa-angle-right"></span></button>
            <button ng-hide="hideImportButton" ng-disabled="currentPage != 'import-apis' || !currentPageValid" id="import" class="btn btn-primary" apiman-action-btn="" data-field="importButton" apiman-i18n-key="import" ng-click="doImport()" data-icon="fa-cog" placeholder="Importing">Import</button>
            <a ng-show="showFinishButton" id="finish" href="{{ pluginName }}/orgs/{{ params.org }}/apis" class="btn btn-primary" apiman-i18n-key="finish">Finish</a>
            <a ng-disabled="disableCancelButton" id="cancel" href="{{ pluginName }}/orgs/{{ org.id }}/apis" class="btn btn-default btn-cancel" apiman-i18n-key="cancel">Cancel</a>
          </div>

        </div>
      </div>
    </div> <!-- /container-pf-nav-pf-vertical container-fluid -->
  </div>
  </body>
</html>
